<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
	<div class="content" v-myTitle :data-title="textTitle" ref="pageInfo">
		<div ref="myDiv" style="height: 84px;position:fixed;top: 0;background-color:#f0f8f8;width: 100%;">
			<div class="search flex2" v-if='tabActive==1'>
				<div class="search-info flex1">
					<input class="search-info-input" v-model="keyWords" type="text" placeholder="请输入医生姓名">
					<div class="search-info-btn flex3" @click="searcEvent()">搜索</div>
				</div>
			</div>
			<div v-else class="addNav"></div>
			<div>
				<van-tabs @change='change' v-model="tabActive" title-active-color='#242424' title-inactive-color='#777777'>
				    <van-tab :title="item.name" v-for="(item,index) in tabList" :key="index"></van-tab>   
				</van-tabs>
			</div>
		</div>
		<!-- 默认 -->
		<div style="padding-top:80px;">
			<!-- 症状 -->
			<div v-if='tabActive==4' class="doctorInfo">
				<div class="rooms">
					<div class="rooms-left">
						<div @click="chooseTabs(v,i)" :class="tipsIndex==i?'active':''" class="rooms-left-item" v-for="(v,i) in newdoctorList" :key='i'>{{v.part}}</div>
					</div>
					<div class="rooms-right">
						<van-collapse :accordion='true' v-model="activeNames" @change='changeTabs'>
						  <van-collapse-item :title="v.name" :name="i" v-for="(v,i) in tipsList" :key='i'>
							  
						  </van-collapse-item>
						</van-collapse>
					</div>
				</div>
				<!-- <div class="doctorInfo-list">
					<div class="doctorInfo-list-i" @click="toDoctor('/doctorShow',v)" v-for="(v,i) in newdoctorList" :key='i'>
						<img class="doctorInfo-list-i-img" :src="v.doctor_sex=='男'?require('@/assets/img/man.jpg'):require('@/assets/img/women.jpg')" alt="">
					    <div class="doctorInfo-list-i-t">
							<div class="doctorInfo-list-i-t-name">{{v.doctor_name}} <span class="ml12">{{v.staff_protec_post}}</span></div>
						    <div class="clamp">{{v.staff_persprf}}</div>
						</div>
					</div>
				</div> -->
			</div>
			<!-- 症状 -->
			<!-- 科室 -->
			<div v-if='tabActive==0'  class="searchInfo" >
				<div class="roomsList">
					<div class="roomsList-i" @click="toPageLink('/register',v)" v-for="(v,i) in roomData" :key='i'>
						<div class="roomsList-i-t">{{v.dept_name}}</div>
						<i class="more_gIcon"></i>
					</div>
				</div>
			</div>
			<!-- 科室 -->
			<!-- 医生 -->
			<div v-if='tabActive==1' class="doctorInfo">
				<div class="doctorInfo-list" >
					<div class="doctorInfo-list-i" @click="toDoctor('/doctorShow',v)" v-for="(v,i) in doctorList" :key='i'>
						<img class="doctorInfo-list-i-img" :src="v.doctor_sex=='男'?require('@/assets/img/man.jpg'):require('@/assets/img/women.jpg')" alt="">
					    <div class="doctorInfo-list-i-t">
							<div class="doctorInfo-list-i-t-name">{{v.doctor_name}} <span class="ml12">{{v.staff_protec_post}}</span></div>
						    <div class="clamp5">{{v.staff_persprf}}</div>
						</div>
					</div>
				</div>
				<div class="noData" v-if='doctorList.length<=0'>
					<img class="noData-img" src="/img/nodata.5e986c71.png" alt="">
					<div class="noData-text">未查到数据</div>
				</div>
			</div>
			<!-- 医生 -->
		</div>
		<back-img></back-img>
	</div>
	</van-pull-refresh>
</template>

<script>
	import {mapGetters,mapState} from 'vuex';
	export default {
		data() {
			return {
				isLoading: false,
				scrollTop:0,
				refDisabled:false,
				keyWords:'',
				tabActive:0,
				tabList:[
					// {name:'症状'},
					{name:'科室'},
					{name:'医生'},
				],
				topH:0,
				navheight:0,
				doctorList:[],
				newdoctorList:[],
				roomData:[],//搜索出来的科室
				textTitle:'选择科室',
				tipsList:[],
				tipsIndex:0,
		        activeNames:'',
			};
		},
		computed: {
			...mapState({
				chooseIndex: 'chooseIndex'
			})
		},
		created() {
			this.getNewdoctor()
			this.roomList()
			this.getdoctor()
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		mounted() {
			let height= this.$refs.myDiv.offsetHeight;  //100
			this.navheight=height+'px'
			
			this.tabActive=this.chooseIndex
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		methods: {
			onRefresh() {
				this.searcEvent()
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			change(e){
				let that=this
				this.tabActive=e
				if(this.tabActive==1){
					that.textTitle='选择医生'
					// that.getdoctor()
				}else if(this.tabActive==0){
					that.textTitle='选择科室'
					// that.roomList()
				}
				// else if(this.tabActive==0){
				// 	that.textTitle='选择症状'
				// 	// that.getNewdoctor()
				// }
			},
			//搜索
			searcEvent(){
				let that=this
				if(that.tabActive==1){//医生
					that.getdoctor()
				}else if(that.tabActive==0){//科室
					that.roomList()
				}
				// else if(that.tabActive==0){//症状
				// 	that.getNewdoctor()
				// }
			},
			chooseTabs(v,i){
				this.tipsIndex=i
				this.activeNames=''
				this.getNewdoctorBar(this.newdoctorList[i])
			},
			getNewdoctor() {
				let url = "/api/his/body_parts";
				this.$axios.get(url,{params:{}}).then(res => {
					this.newdoctorList=res.ack_info
					if(this.newdoctorList.length>0){
						this.activeNames=''
						this.tipsIndex=0
						this.getNewdoctorBar(this.newdoctorList[0])
					}
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			//获取症状对应侧边
			getNewdoctorBar(v) { 
				let url = "/api/his/symptom"; 
				this.$axios.get(url,{params:{part:v.part_id}}).then(res => {
					this.tipsList=res.ack_info
				})
				.catch(err => {
					console.log("err000", err);
				});
			},
			getdoctor() {
				let url = "/api/his/registerDoctor";
				this.$axios.post(url,{
					dept_id:'',
					pat_name:this.keyWords||''
				}).then(res => {
					this.doctorList = res.doclist
				})
				.catch(err => {
					
				});
			},
			roomList() {
				let url = "/api/his/registerDept";
				this.$axios.post(url,{
					dept_id:'',
					search:this.keyWords||''
				}).then(res => {
					this.roomData = res.kslist
				})
				.catch(err => {});
			},
			toPageLink(url,v){
				this.$store.commit("updateChooseIndex",this.tabActive)
				this.$router.push({
					path:url,
					query:{
						dept_id:v.dept_id,
						title:v.dept_name
					},
				})
			},
			changeTabs(e){
				var v=this.tipsList[e]
				this.$store.commit("updateChooseIndex",this.tabActive)
				this.$router.push({
					path:'/register',
					query:{
						dept_id:'',
						title:v.part+'-'+v.name,
						search:v.name
					},
				})
			},
			toDoctor(url,v){
				this.$store.commit("updateChooseIndex",this.tabActive)
				this.$router.push({
					path:url,
					query:{
						dept_id:v.dept_id,
						doctor_id:v.doctor_id
					},
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.content{
		min-height: 100vh;
		background-color:#f0f8f8;
		.addNav{
			width: 100%;
			height: 30px;
			background: #fff;
		}
		.searchInfo{
			width: 100%;
			.roomsList{
				padding: 10px 18px;
				height: 100%;
				overflow-y: scroll;
				&-i{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding:15px 13px;
					background: #FFFFFF;
					border-radius: 10px;
					margin-bottom: 10px;
					&-t{
						display: inline-block;
						width: calc(100% - 50px);
						font-size: 15px;
						font-family: PingFang;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}
		/deep/.van-collapse-item__title .van-cell__right-icon::before{
			transform: rotate(0deg) translateZ(0);
		}
		/deep/.van-collapse-item__title--expanded{
			background-color:#f0f8f8;
		}
		/deep/.van-collapse-item__content{
			background-color:#f0f8f8;
			padding: 0;
		}
		/deep/.van-tabs__line{
			background: #4A8CFF;
		}
		/deep/.van-sidebar-item{
			background-color: #E0E0E0;
			height: 44px;
			width: 120px;
			line-height: inherit;
			text-align: center;
		}
		/deep/.van-sidebar-item--select{
			background-color: #fff;
		}
		/deep/.van-sidebar-item--select::before{
			width: 0;
		}
		/deep/.van-sidebar{
			width: 100%;
		}
		.doctorInfo{
			width: 100%;
			&-list{
				padding:10px 18px;
				overflow-y: scroll;
				&-i{
					padding: 8px;
					width: 340px;
					min-height: 60px;
					background: #FFFFFF;
					border-radius: 10px;
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					&-t{
						width: calc(100% - 56px);
						font-size: 13px;
						font-family: PingFang;
						font-weight: 500;
						color: #666666;
						line-height: 20px;
						&-name{
							font-size: 15px;
							font-family: PingFang;
							font-weight: 500;
							color: #333333;
							margin-bottom: 9px;
						}
					}
					&-img{
						width: 44px;
						height: 44px;
						margin-right: 12px;
						border-radius: 50%;
					}
				}
			}
		}
		.rooms{
			height:calc(100vh - 80px);
			background-color:#fff;
			display: flex;
			align-items: flex-start;
			&-left{ 
				background-color: #E0E0E0;
				width: 120px;
				height:100%;
				overflow-y: scroll;
				&-item{
					width: 120px;
					padding: 16px 0 16px 18px;
					background: #E0E0E0;
					font-size: 14px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					border-left: 2px solid #E0E0E0;
				}
				.active{
					background-color: #fff !important;
					border-left: 2px solid #1977FD !important;
				}
			}
			&-right{
				width: calc(100% - 120px);
				height:100%;
				overflow-y: scroll;
				background-color: #fff;
				&-info{
					background-color:#f0f8f8;
					&-i{
						padding: 0 28px;
						height: 44px;
						line-height: 44px;
						font-size: 14px;
						font-family: PingFang;
						font-weight: 500;
						color: #333333;
						border-bottom: 1px solid #EEEEEE;
					}
				}
			}
		}
		.search{
			padding:5px 18px;
			&-info{
				width: 340px;
				height: 30px;
				// border: 2px solid;
				border-image: linear-gradient(-90deg, #14BAB7, #68E098) 10 10;
				background: linear-gradient(-90deg, #14BAB7 0%, #68E098 100%);
				border-radius: 5px;
				&-input{
					border: none;
					width: calc(100% - 60px);
					margin-left:2px;
					font-size: 14.5px;
					font-family: PingFang;
					font-weight: 500;
				}
				&-btn{
					width: 42px;
					height: 30px;
					background: #1EBEB3;
					border-radius: 0px 5px 5px 0px;
					font-size: 13px;
					font-family: MiSans;
					font-weight: 500;
					color: #FEFEFE;
				}
			}
			
		}
	}
</style>